<template>
  <div class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="填报情况"
      back-icon-color="#fff"
      title-color="#fff"
    />
    <u-tabs
      :list="list"
      is-scroll
      :current="current"
      @change="change"
      active-color="rgb(1, 72, 51)"
      inactive-color="rgb(153, 153, 153)"
    ></u-tabs>
    <scroll-view
      :scroll-into-view="toView"
      scroll-with-animation
      scroll-y
      class="content"
      @scroll="handleScroll"
    >
      <div class="city-box" v-if="countNoShow">
        <div class="city-input">
          <u-input
            v-model="searchData.cityStr"
            placeholder="请选择"
            type="select"
            @click="cityShow = true"
            :select-open="cityShow"
            style="margin: 0 20rpx; border-radius: 10rpx"
          />
        </div>
      </div>
        <!-- :countyNo="countyNo" -->
      <coalStatistics
        :customerList="customerList"
      ></coalStatistics>

      <template v-for="(row, index) of statisticFilledInfoList">
        <div :id="'view' + (index + 1)" :key="row.key">
          <u-card
            box-shadow="0px 0px 8px #ddd6d6"
            :body-style="{ padding: '0 ' }"
            :head-style="{ padding: '28rpx 30rpx 20rpx' }"
            :head-border-bottom="false"
            class="u-m-0 u-m-t-20"
          >
            <view slot="head">
              <view class="u-flex head workFace">
                <u-section
                  :title="row.name"
                  color="rgb(1, 72, 51)"
                  font-size="30"
                  :right="false"
                >
                </u-section>
                <view class="lastDayBox">
                  <span class="lastDay">
                    {{
                      row.key == "produceFilledInfo"
                        ? "截止时间：" + row.lastDay
                        : ""
                    }}
                  </span>
                </view>
              </view>
            </view>
            <view slot="body">
              <view class="situation">
                <template v-for="item of row.child">
                  <view
                    class="situationItem"
                    :key="item.key + row.key"
                    @click="goFillMinesList(item.funKey, row.name + item.name)"
                  >
                    <div class="situationItem-status">
                      <div
                        v-if="item.name != '应填报次数'"
                        class="border"
                        :style="
                          item.name.includes('未') || item.name.includes('异常')
                            ? 'background: linear-gradient(to bottom, #ffadad 5%, #f34822)'
                            : 'background: linear-gradient(to bottom, #A7EED8 5%, #09D098)'
                        "
                      ></div>
                      <div
                        v-if="item.name == '应填报次数'"
                        class="border shouldFillCount"
                      ></div>
                      <p class="situationItem-label">
                        <span>{{ item.name }}</span>
                        <u-icon
                          style="margin-right: 10rpx"
                          v-if="
                            (item.name.includes('未') &&
                              !item.name.includes('次数')) ||
                            item.name.includes('异常')
                          "
                          name="arrow-right"
                        ></u-icon>
                      </p>
                    </div>
                    <div class="situationItemContent">
                      <p
                        class="situationItemP"
                        v-if="statisticFilledInfoObj[row.key]"
                      >
                        {{ statisticFilledInfoObj[row.key][item.key] }}
                      </p>
                      <span>
                        {{ item.name.includes("次数") ? "次" : "" }}
                      </span>
                      <span>
                        {{ item.name.includes("煤矿") ? "家" : "" }}
                      </span>
                    </div>
                  </view>
                </template>
              </view>
            </view>
          </u-card>
        </div>
      </template>
    </scroll-view>

    <u-picker
      mode="selector"
      v-model="cityShow"
      :range="cityList"
      @confirm="cityConfirm"
      range-key="label"
    ></u-picker>
  </div>
</template>

<script>
import uSection from "../../../uview-ui/components/u-section/u-section.vue";
import coalStatistics from "../components/coalStatistics.vue";

export default {
  components: { uSection, coalStatistics },
  data() {
    return {
      current: 0,
      toView: "",
      list: [
        {
          name: "煤层信息",
        },
        {
          name: "储量动态",
        },
        {
          name: "矿井三量",
        },
        {
          name: "掘进年度计划",
        },
        {
          name: "回采年度计划",
        },
        {
          name: "掘进接续管理",
        },
        {
          name: "回采接续管理",
        },
        {
          name: "工作面生产填报",
        },
        {
          name: "地测预报填报",
        },
        {
          name: "探放水填报",
        },
        {
          name: "区域防突填报",
        },
        {
          name: "局部防突填报",
        },
      ],
      statisticFilledInfoObj: {},
      statisticFilledInfoList: [
        {
          name: "煤层信息",
          key: "coalSeamFilledInfo",
          // funKey: "coalSeamIsFill",
          child: [
            {
              name: "已填报",
              key: "filledCount",
            },
            {
              funKey: "coalSeamIsFill",
              name: "未填报",
              key: "unfilledCount",
            },
          ],
        },
        {
          name: "储量动态",
          key: "resDynamicFilledInfo",
          child: [
            {
              name: "应填次数",
              key: "shouldFilledCount",
            },
            {
              name: "已填次数",
              key: "filledCount",
            },
            {
              name: "未填次数",
              key: "unfilledCount",
            },
            {
              funKey: "reservesIsFill",
              name: "未填涉及煤矿",
              key: "unfilledCustomer",
            },
          ],
        },
        {
          name: "矿井三量",
          key: "fourFilledInfo",
          child: [
            {
              name: "应填次数",
              key: "shouldFilledCount",
            },
            {
              name: "已填次数",
              key: "filledCount",
            },
            {
              name: "未填次数",
              key: "unfilledCount",
            },
            {
              funKey: "fourIsFill",
              name: "未填涉及煤矿",
              key: "unfilledCustomer",
            },
          ],
        },
        {
          name: "掘进年度计划",
          key: "jjYearPlanFilledInfo",
          child: [
            {
              name: "已填煤矿",
              key: "filledCount",
            },
            {
              funKey: "jjYearPlanIsFill",
              name: "未填煤矿",
              key: "unfilledCount",
            },
          ],
        },

        {
          name: "回采年度计划",
          key: "cmYearPlanFilledInfo",
          child: [
            {
              name: "已填煤矿",
              key: "filledCount",
            },
            {
              funKey: "hcYearPlanIsFill",
              name: "未填煤矿",
              key: "unfilledCount",
            },
          ],
        },

        {
          name: "掘进接续管理",
          key: "jjSucceededPlanFilledInfo",
          child: [
            {
              name: "已填煤矿",
              key: "filledCount",
            },
            {
              funKey: "jjSucceededPlanIsFill",
              name: "未填煤矿",
              key: "unfilledCount",
            },
            {
              funKey: "jjSucceededPlanIsErr",
              name: "填报异常煤矿",
              key: "errCustomerCount",
            },
          ],
        },

        {
          name: "回采接续管理",
          key: "cmSucceededPlanFilledInfo",
          child: [
            {
              name: "已填煤矿",
              key: "filledCount",
            },
            {
              funKey: "hcSucceededPlanIsFill",
              name: "未填煤矿",
              key: "unfilledCount",
            },
            {
              funKey: "hcSucceededPlanIsErr",
              name: "填报异常煤矿",
              key: "errCustomerCount",
            },
          ],
        },

        {
          name: "工作面生产填报",
          key: "produceFilledInfo",
          lastDay: "this.lastDay",
          child: [
            {
              name: "已填报次数",
              key: "filledCount",
            },
            {
              name: "应填报次数",
              key: "shouldFilledCount",
            },
            {
              name: "未填报次数",
              key: "unfilledCount",
            },
            {
              funKey: "produceIsFill",
              name: "未填报涉及煤矿",
              key: "unfilledCustomer",
            },
          ],
        },

        {
          name: "地测预报填报",
          key: "groundFilledInfo",
          child: [
            {
              name: "正常煤矿",
              key: "normalCustomerCount",
            },
            {
              funKey: "groundIsFill",
              name: "异常煤矿",
              key: "errCustomerCount",
            },
          ],
        },
        {
          name: "探放水填报",
          key: "waterFilledInfo",
          child: [
            {
              name: "正常煤矿",
              key: "normalCustomerCount",
            },
            {
              funKey: "waterIsFill",
              name: "异常煤矿",
              key: "errCustomerCount",
            },
          ],
        },
        {
          name: "区域防突填报",
          key: "regionOutBurstFilledInfo",
          child: [
            {
              name: "正常煤矿",
              key: "normalCustomerCount",
            },
            {
              funKey: "regionOutBurstIsFill",
              name: "异常煤矿",
              key: "errCustomerCount",
            },
          ],
        },
        {
          name: "局部防突填报",
          key: "partOutBurstFilledInfo",
          child: [
            {
              name: "正常煤矿",
              key: "normalCustomerCount",
            },
            {
              funKey: "partOutBurstIsFill",
              name: "异常煤矿",
              key: "errCustomerCount",
            },
          ],
        },
      ],
      situationItemBoderStyle1: "border-left: 10rpx solid greenyellow;",
      situationItemBoderStyle2: "border-left: 10rpx solid red;",
      cityList: [],
      searchData: {},
      customerList: [],
      countyNo: "",
      countNoShow: false,
      cityShow: false,
    };
  },
  onShow() {
    // 获取当前日期
    var today = new Date();

    // 设置日期为昨天（即当前日期减去一天）
    var yesterday = new Date(
      today.getFullYear(),
      today.getMonth(),
      today.getDate() - 1
    );

    // 格式化日期为 YYYY-MM-DD 格式
    var year = yesterday.getFullYear();
    var month = String(yesterday.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1，并用padStart填充前导零
    var day = String(yesterday.getDate()).padStart(2, "0"); // 用padStart填充前导零
    this.statisticFilledInfoList[7].lastDay = `${year}-${month}-${day} 23:59:59`;
  },
  onLoad() {
    if (getApp().globalData.userInfo.superviseLevel === "40") {
      this.countNoShow = true;
    }

    // 获取区县
    this.getCityList();
  },
  methods: {
    init() {
      // 获取煤矿
      this.getCustomerList();
      this.getstatisticFilledInfo();
      // // 获取工作面情况
      // this.statisticEngInfo()
      // // 三量可采期情况
      // this.situation()
    },
    async getstatisticFilledInfo() {
      const { body } = await this.$post("/cjt/app/statisticFilledInfo", {
        // countyNo: this.countyNo,
      });
      this.statisticFilledInfoObj = body;
    },
    cityConfirm(index) {
      this.searchData.cityStr = this.cityList[index].label;
      this.countyNo = this.cityList[index].id;
      this.init();
    },
    change(index) {
      this.current = index;
      this.toView = `view${index + 1}`;
    },
    getCityList() {
      this.$get("/cjt/common/app/getCountyList").then((res) => {
        this.cityList = res.body;
        this.searchData.cityStr = res.body[0].label;
        this.countyNo = this.cityList[0].id;
        this.init();
      });
    },
    getCustomerList() {
      // this.$get("/cjt/common/getCustomerList?countyNo=" + this.countyNo).then(
      this.$get("/cjt/common/getCustomerList").then(
        (res) => {
          this.customerList = res.body;
        }
      );
    },
    // goMineList() {
    //   uni.navigateTo({
    //     url: `/pages/cjt/basicInformation/mineList/index?countyNo=${this.countyNo}`,
    //   });
    // },
    goFillMinesList(param, searchLabel) {
      let data = {
        // countyNo: this.countyNo,
      };
      data[param] = 1;
      if (
        (searchLabel.includes("未") || searchLabel.includes("异常")) &&
        !searchLabel.includes("次数")
      ) {
        uni.navigateTo({
          url: `/pages/cjt/fillSituation/fillMinesList/fillMinesList?data=${JSON.stringify(
            data
          )}&searchLabel=${searchLabel}`,
        });
      }
    },
    handleScroll({ detail }) {
      // 112 是scroll-view到顶部的距离
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#view1")
        .boundingClientRect((res) => {
          if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 0;
          }
        })
        .exec();
      query
        .select("#view2")
        .boundingClientRect((res) => {
          if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 1;
          }
        })
        .exec();
      query
        .select("#view3")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 2;
          }
        })
        .exec();
      query
        .select("#view4")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 3;
          }
        })
        .exec();
      query
        .select("#view5")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 4;
          }
        })
        .exec();
      query
        .select("#view6")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 5;
          }
        })
        .exec();
      query
        .select("#view7")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 6;
          }
        })
        .exec();
      query
        .select("#view8")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 7;
          }
        })
        .exec();
      query
        .select("#view9")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 8;
          }
        })
        .exec();
      query
        .select("#view10")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 9;
          }
        })
        .exec();
      query
        .select("#view11")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 10;
          }
        })
        .exec();
      query
        .select("#view11")
        .boundingClientRect((res) => {
         if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 10;
          }
        })
        .exec();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: #fff;
}
.content {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
}

.city-box {
  //   display: grid;
  //   grid-template-columns: 110px auto;
  //   grid-column-gap: 10px;

  .city-input {
    background: rgba(0, 0, 0, 0.03);
    height: 35px;
    padding: 5px;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
  }
  .mine-num-box {
    background-image: url("/static/image/cjt/cjnxzc.png");
    background-size: 100% 100%;
    padding: 6rpx;
    border-radius: 22rpx;
  }
  .mine-num {
    // text-align: center;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    width: 100%;
    padding: 0 20rpx;
    // height: 45px;
    box-sizing: border-box;
    background: #fff;
    line-height: 45px;
    background-color: rgba(0, 0, 0, 0);
    // background-image: url("/static/image/cjt/cjnxzc.png");
    // background-size: 100% 100%;
  }

  .mine-num-val {
    font-size: 16px;
    margin-left: 0 20rpx 0 10rpx;
    position: relative;
    top: 1px;
  }
}
.mineBox {
  background-image: url("/static/image/cjt/cjnxzc.png");
  background-size: 100% 100%;
  // padding: 0 10px;
  padding: 10rpx;

  border-radius: 20rpx;
  // text-align: center;
  .mine-num {
    display: flex;
    justify-content: space-between;
  }
  .mine-num-val {
    // color: rgb(61, 95, 255);
    font-size: 16px;
    margin-left: 10px;
  }
}
.situation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 15rpx 0;

  .situationItem {
    padding: 30rpx 0 15rpx 20rpx;
    margin: 20rpx 0 20rpx 0;
    background-color: #f7f7fa;
    width: 47%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 10rpx;
    .situationItemContent {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      .situationItemP {
        margin: 0 10rpx 0 20rpx;
        font-weight: 900;
        color: black;
        font-size: 35rpx;
      }
    }
    .situationItem-status {
      position: relative;
      .border {
        position: absolute;
        width: 10rpx;
        background: linear-gradient(to bottom, #ffadad 5%, #f34822);
        height: 40rpx;
        border-radius: 10rpx;
      }
      .situationItem-label {
        margin-left: 20rpx;
        display: flex;
        justify-content: space-between;
      }
      .shouldFillCount {
        background: linear-gradient(to bottom, #81e4fe 5%, #0ab1ff);
      }
    }
  }
}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f6f6f6;
}

.workFace {
  display: flex;
  .lastDayBox {
    margin-left: 40rpx;
    width: 900rpx;
    .lastDay {
      font-size: 23rpx;
      color: gray;
    }
  }
}
.gzmqk {
  background: linear-gradient(rgb(243, 247, 255), rgba(255, 255, 255, 0));
  border-radius: 6px 6px 0 0;
}

.gzm-box {
  background: linear-gradient(
    rgba(10, 207, 151, 0.5),
    rgba(167, 238, 217, 0.5)
  );
  margin: 10px;
  margin-top: 0;
  border-radius: 6px;
  padding-bottom: 3px;

  .gzm-item-bg {
    padding-top: 10px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 10px;
    border-radius: 6px;

    .gzm-item-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      background: rgba(207, 207, 207, 0.5);
      grid-column-gap: 1px;

      .gzm-item {
        text-align: center;
        background: #fff;
        padding-top: 10px;
        padding-bottom: 10px;

        .gzm-name {
          font-size: 12px;
          margin-top: 10px;
        }
      }
    }

    .gzm-item-box1 {
      grid-template-columns: 1fr 1fr;
    }

    .gzm-item-box2 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.gzm-box-zt {
  background: linear-gradient(rgba(210, 158, 8, 0.5), rgba(239, 220, 166, 0.5));
}

.gzm-box-kg {
  background: linear-gradient(rgb(204, 239, 255), rgba(224, 249, 255, 0.85));
}

.gzm-box-jx {
  background: linear-gradient(rgb(255, 158, 80), rgb(254, 177, 51));
}

.gzm-box-lj {
  background: linear-gradient(rgba(255, 191, 60, 0.5), rgba(255, 191, 60, 0.5));
}

.gzm-title {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.gzmqk-hc {
  background: linear-gradient(rgb(255, 250, 242), rgba(255, 250, 242, 0));
}
</style>
